<template>
  <div class="visualization">
    <!-- banner start -->
    <div class="caption-title" @mouseenter="enterEvt" @mouseleave="leaveEvt">
      <span class="f-left">
        <img
          :src="logo"
          alt="歌尔logo"
          class="img"
          @click="jumpClick('home')"
        />
      </span>
      <span class="biaoti">SAC2-MD 数字化看板</span>
      <span
        class="fixed-back"
        v-if="map_line || classroom_pro"
        @click="historygo()"
      >
        <svg-icon icon-class="kb-goback" class-name="goback-icon" />
      </span>
      <span class="f-right">
        <NowTime />
      </span>
      <span class="login-out">
        <Loginout />
      </span>
      <span class="screen-right">
        <Screenfull />
      </span>
      <TopNavigation v-show="seenNav && pcLine">
        <el-row>
          <el-col :span="3">&nbsp;</el-col>
          <el-col :span="5" class="slt-cls">
            <label>看板名称：</label>
            <el-select
              v-model="kanbanId"
              placeholder="请选择看板"
              size="medium"
              :popper-append-to-body="false"
              @change="kanbanChange"
            >
              <el-option
                v-for="(item, index) in kanbanOptions"
                :key="index"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5" class="slt-cls">
            <label>客户群名称：</label>
            <el-select
              v-model="sltClass"
              placeholder="请选择客户群"
              :popper-append-to-body="false"
              @change="classChange"
            >
              <el-option
                v-for="item in classOptions"
                :key="item.ORG_CODE"
                :label="item.ORG_NAME"
                :value="item.ORG_CODE"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5" class="slt-cls">
            <label>项目名称：</label>
            <el-select
              v-model="sltProject"
              placeholder="请选择项目"
              :popper-append-to-body="false"
              @change="proChange"
              style="width:280px;"
            >
              <el-option
                v-for="item in projectOptions"
                :key="item.CLASS_CODE"
                :label="item.CLASS_NAME"
                :value="item.CLASS_CODE"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6" class="slt-cls">
            <label>线体名称：</label>
            <el-select
              v-model="line_code"
              placeholder="请选择线体"
              :popper-append-to-body="false"
              @change="lineChange"
              style="width:280px;"
            >
              <el-option
                v-for="item in lineOptions"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </TopNavigation>
    </div>
    <div class="btm-scroll" v-if="tmpTips.length > 0">
      <div class="scroll-contair">
        <SeamlessScroll width="1366px" height="30px" :scrollList="tmpTips">
          <ul class="item" v-if="tmpTips.length > 0" style="min-width:1366px;">
            <li
              v-for="(item, index) in tmpTips"
              :key="index"
              v-html="item.NOTICE_CONTENT"
            ></li>
          </ul>
        </SeamlessScroll>
      </div>
    </div>
    <span class="call-info" @click="callClick"
      ><i class="el-icon-phone-outline"></i>
      <div>呼叫</div>
    </span>
    <el-carousel
      :height="bannerHeight + 'px'"
      :interval="20000"
      indicator-position="outside"
      :initial-index="initialIndex"
      :autoplay="true"
      @change="scrollChange"
    >
      <!-- arrow="never" -->

      <!-- 第一页轮播 -->
      <el-carousel-item>
        <div class="rate-container">
          <span class="gauge-w">
            <BorderFrame
              :style="{ height: '275px', width: '100%' }"
              contentHeight="245px"
              contentTitle="班次产能达成率"
            >
              <GaugeEchart
                v-if="kanban1.right.capacityConfig.CAPACITY >= 0"
                :echartData="kanban1.right.capacityConfig.CAPACITY"
                :style="{ height: '220px', width: '100%' }"
              />
              <div class="btm-title">
                标准产能：{{ kanban1.right.capacityConfig.ALLNUMBER }} /
                实际产能：{{ kanban1.right.lineEfficiencyData.OKNUMBER }}
              </div>
            </BorderFrame>
          </span>
          <span class="gauge-w">
            <BorderFrame
              :style="{ height: '275px', width: '100%' }"
              contentHeight="245px"
              contentTitle="班次线体直通率"
            >
              <GaugeEchart
                v-if="kanban1.right.throughConfig.FPY >= 0"
                :echartData="kanban1.right.throughConfig.FPY"
                :style="{ height: '220px', width: '100%' }"
              />
              <div class="btm-title">
                CCD良率：
                <!-- {{ kanban1.right.lineEfficiencyData.REALNUMBER }} -->
                {{ kanban1.right.throughConfig.OKNUMBER }}%
                / 人工检验良率：{{ kanban1.right.throughConfig.INPUT }}%
              </div>
            </BorderFrame>
          </span>
          <span class="gauge-w">
            <BorderFrame
              :style="{ height: '275px', width: '100%' }"
              contentHeight="245px"
              contentTitle="班次CCD良率"
            >
              <GaugeEchart
                v-if="kanban1.right.lineEfficiencyData.YIELD >= 0"
                :echartData="kanban1.right.lineEfficiencyData.YIELD"
                :style="{ height: '220px', width: '100%' }"
              />
              <div class="btm-title">
                CCD投入：{{ kanban1.right.lineEfficiencyData.REALNUMBER }} /
                CCD产出：{{ kanban1.right.lineEfficiencyData.OKNUMBER }}
              </div>
            </BorderFrame>
          </span>
          <span class="gauge-w">
            <BorderFrame
              :style="{ height: '275px', width: '100%' }"
              contentHeight="245px"
              contentTitle="班次OEE"
            >
              <GaugeEchart
                v-if="kanban1.right.oEEData.RATE >= 0"
                :echartData="kanban1.right.oEEData.RATE"
                :style="{ height: '220px', width: '100%' }"
              />
            </BorderFrame>
          </span>
          <span class="gauge-w">
            <BorderFrame
              :style="{ height: '275px', width: '100%' }"
              contentHeight="245px"
              contentTitle="工单产能达成率"
            >
              <WaterDiagramEchart
                chartsId="chartsId2"
                :echartData="kanban1.right.workOrderConfig"
                :style="{ height: '220px', width: '100%' }"
              />
              <div class="btm-title">
                计划量：{{ kanban1.right.workOrderConfig.QTY }} / 完成量：{{
                  kanban1.right.workOrderConfig.OUTPUT_QTY
                }}
              </div>
            </BorderFrame>
          </span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <BorderFrame
              :style="{ height: '345px', width: '100%' }"
              contentHeight="320px"
              contentTitle="线体概览"
            >
              <div class="xmglan">
                <div id="xmgl_cen">
                  <div class="xmgl_tb">
                    <ul class="xm_cszs">
                      <li>
                        客户群名称：<span>{{
                          kanban1.left.lineSummaryData.department
                        }}</span>
                      </li>
                      <li>
                        项目名称：<span>{{
                          kanban1.left.lineSummaryData.project
                        }}</span>
                      </li>
                      <li>
                        线体名称：<span>{{ line_code }}</span>
                      </li>
                      <li>
                        在制工单：<span>{{
                          kanban1.left.lineSummaryData.workOrder
                        }}</span>
                      </li>
                      <li>
                        课&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长：<span>{{
                          kanban1.left.lineSummaryData.classdirector
                        }}</span>
                      </li>
                      <li>
                        主责技师：<span>{{
                          kanban1.left.lineSummaryData.technician
                        }}</span>
                      </li>
                      <li>
                        工艺工程师：<span>{{
                          kanban1.left.lineSummaryData.PE_PERSON
                        }}</span>
                      </li>
                      <li>
                        品质工程师：<span>{{
                          kanban1.left.lineSummaryData.QE_PERSON
                        }}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </BorderFrame>
          </el-col>
          <el-col :span="12">
            <BorderFrame
              :style="{ height: '345px', width: '100%' }"
              contentHeight="320px"
              contentTitle="产能达成展示"
              :titileStatus="false"
            >
              <span
                class="wgrytj_bt"
                style="display:inline-block;padding-top:15px;"
                ><img src="../../assets/images/header_icon.png" alt="" />
                班次小时产能达成</span
              >
              <div class="center-charts capactitySty">
                <BarTargetEchart
                  :echartData="kanban1.center.capacityData"
                  :style="{ height: '280px', width: '100%' }"
                />
              </div>
            </BorderFrame>
          </el-col>
          <el-col :span="6">
            <BorderFrame
              :style="{ height: '345px', width: '100%' }"
              contentHeight="320px"
              :alarmStatus="alarmStatus"
              contentTitle="物料监控"
            >
              <span class="wgrytj_bt" style="margin-top: 15px;"
                ><img src="../../assets/images/header_icon.png" alt="" />
                剩余备料</span
              >
              <div style="padding: 7px 0px 7px 20px;">
                <span
                  style="dispaly:inline-block;color:#fff;font-size:18px;padding-right:10px;"
                  v-for="(item, index) in kanban1.left.materielList"
                  :key="index"
                >
                  {{ item.SECTION_CODE }}: {{ item.BAK_QUANTITY }}
                </span>
              </div>
              <span class="wgrytj_bt"
                ><img src="../../assets/images/header_icon.png" alt="" />
                实时物料</span
              >
              <BarEchartLevel
                :echartData="kanban1.left.materielData"
                :style="{ height: '220px', width: '100%' }"
              />
            </BorderFrame>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <BorderFrame
              :style="{ height: '330px', width: '100%' }"
              contentHeight="310px"
              contentTitle="CCD不良项"
            >
              <BarLineEchart
                :echartData="kanban2.right.CCDData"
                :style="{ height: '300px', width: '100%' }"
              />
            </BorderFrame>
          </el-col>
          <el-col :span="12">
            <BorderFrame
              :style="{ height: '330px', width: '100%' }"
              contentHeight="310px"
              contentTitle="班次节拍平衡图"
            >
              <div class="center-charts stationSty">
                <BarTargetEchart
                  :echartData="kanban1.center.workStationData"
                  :style="{ height: '300px', width: '100%' }"
                />
              </div>
            </BorderFrame>
          </el-col>
        </el-row>
      </el-carousel-item>
      <!-- 第二页轮播 -->
      <el-carousel-item>
        <el-row :gutter="20" class="top-container">
          <el-col :span="8">
            <div class="top-content">
              <el-row :gutter="20">
                <el-col :span="7">
                  <div class="icon-img">
                    <svg-icon icon-class="kb-repair" class-name="kb-icon" />
                  </div>
                </el-col>
                <el-col :span="17">
                  <div class="icon-title">本班次平均故障修复时间（MTTR）</div>
                  <div class="icon-content" style="color:#d81e06;">
                    {{ kanban2.top.repair }}分钟
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="top-content">
              <el-row :gutter="20">
                <el-col :span="7">
                  <div class="icon-img">
                    <svg-icon icon-class="kb-no-fault" class-name="kb-icon" />
                  </div>
                </el-col>
                <el-col :span="17">
                  <div class="icon-title">本班次平均无故障时间（MTTF）</div>
                  <div class="icon-content" style="color:#fdd845;">
                    {{ kanban2.top.fault }}分钟
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="top-content">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="icon-img">
                    <svg-icon icon-class="kb-cycle" class-name="kb-icon1" />
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="icon-title">本班次平均故障间隔时间（MTBF）</div>
                  <div class="icon-content" style="color:#25f3e6;">
                    {{ kanban2.top.invalid }}分钟
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <BorderFrame
              :style="{ height: '400px', width: '100%' }"
              contentHeight="370px"
              contentTitle="线体运行状态"
            >
              <div v-if="kanban2.left.ganttData.data.length > 0">
                <div class="center-charts" style="min-height:300px;">
                  <!-- <GanttEchart/> -->
                  <GanttHighchart
                    :id="kanban2.left.gantt1"
                    v-if="kanban2.left.ganttData.data.length > 0"
                    :echartData="kanban2.left.ganttData"
                    :style="{ height: '300px', width: '100%' }"
                  />
                </div>
                <div class="gantt-status">
                  <span class="run"></span><span>运行</span>
                  <span class="alarm"></span><span>报警</span>
                  <span class="await"></span><span>待机</span>
                  <span class="stop"></span><span>停机</span>
                </div>
              </div>
              <div
                v-else
                style="width: 100%;height: 100%;color: #fff;font-size: 20px;text-align: center;line-height: 280px;"
              >
                暂无数据
              </div>
            </BorderFrame>
            <BorderFrame
              :style="{ height: '400px', width: '100%' }"
              contentHeight="355px"
              contentTitle="报警数量TOP5"
            >
              <BarEchartLevel
                :echartData="kanban2.left.alarmTop"
                :style="{ height: '330px', width: '100%' }"
              ></BarEchartLevel>
            </BorderFrame>
          </el-col>
          <el-col :span="12">
            <BorderFrame
              :style="{ height: '400px', width: '100%' }"
              contentHeight="370px"
              contentTitle="穴位不良监控"
            >
              <BarLineEchart
                :echartData="kanban2.right.acupointData"
                :style="{ height: '340px', width: '100%' }"
              />
            </BorderFrame>
            <BorderFrame
              :style="{ height: '400px', width: '100%' }"
              contentHeight="355px"
              contentTitle="报警时长TOP5"
            >
              <BarEchartLevel
                :echartData="kanban2.right.alarmTimeTop"
                :style="{ height: '330px', width: '100%' }"
              ></BarEchartLevel>
            </BorderFrame>
          </el-col>
        </el-row>
      </el-carousel-item>
      <!-- 第三页轮播 -->
      <!-- <el-carousel-item>
        <div class="top-title">
          <el-row :gutter="20" class="top-container">
            <el-col :span="6">
              <div class="top-content">
                客户群名称：<span>{{
                  kanban1.left.lineSummaryData.department
                }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="top-content">
                客户群负责人：<span>{{
                  kanban1.left.lineSummaryData.classdirector
                }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="top-content">
                项目名称：<span>{{
                  kanban1.left.lineSummaryData.project
                }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="top-content">
                线体名称：<span>{{ line_code }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <BorderFrame
          :style="{ height: '900px', width: '100%' }"
          contentHeight="856px"
          contentTitle="线体运行状态"
        >
          <div class="center-map">
            <div class="main-center">
              <div
                v-for="(item, index) in centerData"
                :key="index"
                class="outlayer"
              >
                <span
                  class="pos-tips"
                  v-show="showTips == index"
                  :style="{
                    top: item.y1 - 190 + 'px',
                    left: item.x - 120 + 'px'
                  }"
                >
                  <p style="text-align: center;padding-bottom: 8px;">
                    单元名称：<span>{{ item.UNIT }}</span>
                  </p>
                  <div class="main-view">
                    <div class="right-view">
                      <p>
                        标准产能：<span class="show-word">{{
                          kanban1.right.capacityConfig.ALLNUMBER
                        }}</span>
                        实际产能：<span class="show-word">{{
                          kanban1.right.lineEfficiencyData.OKNUMBER
                        }}</span>
                      </p>
                      <p>
                        产能达成率：<span class="show-word"
                          >{{ kanban1.right.capacityConfig.CAPACITY }}%</span
                        >
                      </p>
                      <p>
                        单元投入：<span class="show-word">{{
                          kanban1.right.lineEfficiencyData.REALNUMBER
                        }}</span>
                        单元产出：<span class="show-word">{{
                          kanban1.right.lineEfficiencyData.OKNUMBER
                        }}</span>
                      </p>
                      <p>
                        标准节拍：<span class="show-word">{{ target_tt }}</span>
                        实际节拍：<span class="show-word">{{
                          workStationData
                        }}</span>
                      </p>
                      <p>
                        单元报警：<span class="show-word">{{
                          item.ALARM_NUM
                        }}</span>
                      </p>
                      <p>
                        时间稼动率：<span class="show-word"
                          >{{ item.TIME_RATE }}%</span
                        >
                      </p>
                    </div>
                  </div>
                </span>
                <span
                  class="pos"
                  :style="{ top: item.y + 'px', left: item.x + 'px' }"
                  @mouseenter="entertips(index)"
                  @mouseleave="leavetips"
                >
                  <img
                    v-if="item.COLLECT_VALUE == 1"
                    src="../../assets/images/green.png"
                    alt=""
                    :class="[tipsLamp ? 'lamp-box' : '']"
                    height="30"
                  />
                  <img
                    v-else-if="item.COLLECT_VALUE == 2"
                    src="../../assets/images/red.png"
                    alt=""
                    :class="[tipsLamp ? 'lamp-box1' : '']"
                    height="30"
                  />
                  <img
                    v-else-if="item.COLLECT_VALUE == 3"
                    src="../../assets/images/yellow.png"
                    alt=""
                    :class="[tipsLamp ? 'lamp-box' : '']"
                    height="31"
                  />
                  <img
                    v-else
                    src="../../assets/images/gray.png"
                    alt=""
                    :class="[tipsLamp ? 'lamp-box' : '']"
                    height="30"
                  />
                </span>
              </div>
            </div>
            <div class="bottom-tips">
              <img
                src="../../assets/images/green.png"
                alt=""
                height="20"
              /><span>&nbsp;运行&nbsp;</span>
              <img src="../../assets/images/red.png" alt="" height="20" /><span
                >&nbsp;故障&nbsp;</span
              >
              <img
                src="../../assets/images/yellow.png"
                alt=""
                height="21"
              /><span>&nbsp;待机&nbsp;</span>
              <img src="../../assets/images/gray.png" alt="" height="20" /><span
                >&nbsp;停机&nbsp;</span
              >
            </div>
          </div>
        </BorderFrame>
      </el-carousel-item> -->
      <!-- 第四页轮播 -->
    </el-carousel>
    <div class="callDetail" v-show="callStatus">
      <div style="height: 30px;">
        <span class="close-btn"
          ><i class="el-icon-circle-close" @click="closeClick"></i
        ></span>
      </div>
      <div style="text-align: center;font-size:20px;">
        人工呼叫
      </div>
      <div class="call-tab">
        <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="快捷呼叫" name="first"> </el-tab-pane>
          <el-tab-pane label="自定义呼叫" name="second"> </el-tab-pane>
        </el-tabs> -->
        <el-row class="space" style="height:400px !important;">
          <el-form
            :model="callRuleForm"
            ref="callRuleForm"
            :rules="rules"
            label-width="140px"
            class="demo-ruleForm"
          >
            <el-col :span="24" class="space-contair">
              <div class="slt-cls">
                <el-form-item label="线体：">
                  <el-input
                    v-model="line_code"
                    placeholder="线体"
                    style="width: 400px;"
                    disabled
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="24" class="space-contair">
              <div class="slt-cls">
                <el-form-item label="工位：" prop="station">
                  <el-select
                    v-model="callRuleForm.station"
                    placeholder="请选择"
                    size="medium"
                    :popper-append-to-body="false"
                    style="width: 400px;"
                  >
                    <el-option
                      v-for="(item, index) in stationOption"
                      :key="index"
                      :label="item.STATION_NAME"
                      :value="item.STATION_NAME"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="24" class="space-contair">
              <div class="slt-cls">
                <el-form-item label="原因：" prop="reason">
                  <el-select
                    v-model="callRuleForm.reason"
                    placeholder="请选择"
                    size="medium"
                    :popper-append-to-body="false"
                    style="width: 400px;"
                  >
                    <el-option
                      v-for="(item, index) in reasonOptions"
                      :key="index"
                      :label="item.CALLREASON"
                      :value="item.CALLREASON"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="24" class="space-contair">
              <!-- v-if="activeName == 'second'" -->
              <div class="slt-cls">
                <el-form-item label="工程师：" prop="person">
                  <el-select
                    v-model="callRuleForm.person"
                    placeholder="请选择"
                    size="medium"
                    :popper-append-to-body="false"
                    multiple
                    style="width: 400px;"
                  >
                    <el-option
                      v-for="(item, index) in personOptions"
                      :key="index"
                      :label="item.user_name + ' - ' + item.role_name"
                      :value="item.user_id"
                    >
                      <!-- :value="item.user_code" -->
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col
              :span="24"
              class="space-contair"
              style="padding-top:20px;padding-left:140px;"
            >
              <el-button type="primary" @click="submitForm('callRuleForm')"
                >呼 叫</el-button
              >
              <el-button type="info" plain @click="resetForm('callRuleForm')"
                >取 消</el-button
              >
            </el-col>
          </el-form>
        </el-row>
      </div>
    </div>
    <div class="footer-bottom">
      <el-row :gutter="20" style="color:#fff;">
        <!-- <el-col :span="16">
        <span style="display:inline-block;">
          线体实时运行状态：刷新时间{{ refreshTime }}秒。</span
        >
      </el-col> -->
        <el-col :span="24" style="text-align: right;padding-right:40px;">
          Copyright © 2019-{{ nowYear }} Goertek SAC-IT All Rights Reserved.
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import qs from "qs";
import { Message, Loading } from "element-ui";
import { loadXML, addParams } from "@/utils/xmlJson";
import echartData from "@/components/Charts/echartData.js";
import BarEchart from "@/components/Charts/BarEchart";
import LineStackedArea from "@/components/Charts/LineStackedArea";
import BarLineEchart from "@/components/Charts/BarLineEchart";
import BarEchartSmallLevel from "@/components/Charts/BarEchartSmallLevel";
import BarEchartLevel from "@/components/Charts/BarEchartLevel";
import BarTargetEchart from "@/components/Charts/BarTargetEchart";
import GaugeEchart from "@/components/Charts/GaugeEchart";
import GanttHighchart from "@/components/Charts/GanttHighchart";
import GanttEchart from "@/components/Charts/GanttEchart";
import WaterDiagramEchart from "@/components/Charts/WaterDiagramEchart";
import NowTime from "@/components/NowTime";
import Screenfull from "@/components/Screenfull";
import Loginout from "@/components/Loginout";
import BorderFrame from "@/components/BorderFrame";
import SeamlessScroll from "@/components/SeamlessScroll";
import SwiperScroll from "@/components/SwiperScroll";
import logo from "@/assets/images/logo-white.png";
import TopNavigation from "@/components/TopNavigation";
import { GroupbyName } from "@/utils/dataFormat";
import lineData from "./lineData.js";
import {
  setLocalStorage,
  getLocalStorage,
  removeLocalStorage
} from "@/utils/auth";
import {
  getLineconfig,
  getLineInfo,
  getObjectLine,
  getMateriel,
  getCapacity,
  getWorkStation,
  getCapacityEfficiency,
  getLineEfficiency,
  getWorkOrder,
  getHeaderTEEP,
  getHeaderMTTR,
  getHeaderMTTF,
  getHeaderMTBF,
  getRealStatus,
  getCCD,
  getAlarmNUm,
  getAlarmTime,
  getThroughRate,
  getOeeRate,
  getAcupoint,
  getNotice,
  getCallLineStation,
  getCallLineProject,
  getCallProjectReason,
  GetUnitRunStatus,
  GetUnitAlarm,
  GetUnitTimeRate,
  GetStationByLineSection,
  GetUnitInputOut
} from "@/api/kanbanLine";
import { gmesGeneralInterface, getOldLinePerson } from "@/api/gmesapi";
import { getAllClass } from "@/api/kanbanDepartment";
import commonData from "@/api/commonData.js";
export default {
  name: "projectline",
  data() {
    return {
      //项目编码
      sql: "",
      line_code: "GR090825L-200*F2HDJ-18",
      line_name: "",
      project_code: "", //项目编码
      split_arr: [], //存储分割的字符串
      logo: logo,
      timeout: null,
      timeout1: null, //工站节拍刷新频率
      timeout2: null, //公告滚动展示
      timeout3: null, //数据同步
      timeout4: null, //数据同步
      reloadtime: null, //每天定时刷新
      refreshTime: 1, //刷新频率 秒
      scrollIndex: 0, //轮播当前页码
      nowYear: new Date().getFullYear(),
      classHour: new Date(),
      bannerHeight: "960",
      initialIndex: 0,
      domLine: false, //是否是dom线
      seenNav: false, //控制显示隐藏导航栏
      pcLine: true, // 控制显示pc端访问true，线体端访问false
      getEchartData: echartData,
      //目标产能
      target_capacity: 0,
      //实际产出个数
      actual_num: 0,
      //目标良率
      target_yield: 0,
      //标准节拍
      target_tt: 0,
      kanban1: {
        left: {
          lineSummaryData: {},
          materielData: {
            data: [],
            color: ["#05f8d6"],
            // name: [],
            // legend: [],
            minNum: [],
            showMax: 100,
            grid: {
              top: "10%",
              bottom: "12%"
            },
            singleColor: ["#FF6F90", "#FFB36F"]
          },
          materielList: [],
          materielCharts: []
        },
        center: {
          capacityData: {
            data: [],
            // color: [ "#71c16f","#05f8d6"],
            // barData: [],
            color: ["#FF6F90"]
          },
          goodProductsData: {
            data: [],
            labelformate: "%",
            axisLabelformate: "%"
          },
          workStationData: {
            // barData: [],
            data: [],
            color: ["#05f8d6"]
          }
        },
        right: {
          capacityEfficiencyData: 0,
          lineEfficiencyData: {
            OKNUMBER: 0,
            REALNUMBER: 0,
            YIELD: 0
          },
          workOrderData: 0,
          capacityConfig: {
            // data: [0]
            ALLNUMBER: 0,
            CAPACITY: 0,
            REALNUMBER: 0
          },
          throughConfig: {
            FPY: 0,
            OKNUMBER: 0,
            INPUT: 0
          },
          oEEData: {
            RATE: 0
          },
          lineEfficiencyConfig: {
            data: [0]
          },
          workOrderConfig: {
            // data: [0]
            OUTPUT_QTY: 0,
            QTY: 0,
            data: [0]
          }
        }
      },
      alarmStatus: false,
      alarmTimeout: null,
      twinkleStatus: false, //true闪烁报警提示
      kanban2: {
        top: {
          teep: "0",
          repair: "0",
          fault: "0",
          invalid: "0"
        },
        left: {
          ganttData: {
            data: []
          },
          gantt1: "gantt1",
          gantt2: "gantt2",
          alarmTop: {
            data: [],
            labelformate: "%",
            axisLabelformate: "%"
          }
        },
        right: {
          CCDData: {
            data: [],
            labelformate: "%",
            color: ["#f89588", "#fdd845"]
          },
          alarmTimeTop: {
            data: [],
            labelformate: "%",
            axisLabelformate: "%"
          },
          acupointData: {
            data: [],
            labelformate: "%",
            axisLabelformate: "%"
          }
        }
      },
      tmpTips: [],
      kanbanId: "kanban1", //看板
      kanbanOptions: commonData.kanbanData,
      sltClass: null, //客户群id
      classOptions: [], //客户群option
      allProLinedata: [], //项目和从线体集合
      projectOptions: [], //option项目
      lineOptions: [], //option线体
      sltProject: null, //PS8下拉
      sltLine: null, //PS8-01下拉
      projectId: null, //url上项目id
      lineOnoff: true, //第一次进入页面生效
      lineId: null, //url上线体id
      classroom_pro: null, // 客户群跳转过来-项目名称
      map_line: null, //全景图跳转过来的线体参数
      map_project: null, //全景图跳转过来的线体参数
      map_class: null, //全景图跳转过来的线体参数
      token: "",
      callStatus: false, //呼叫界面
      //技师看线整体-数据组件
      technicianLine: [],
      reasonOptions: [], //呼叫原因
      personOptions: [], //呼叫人员
      stationOption: [], //呼叫工位
      //呼叫信息
      callRuleForm: {
        project: "",
        station: "",
        line: "",
        reason: "",
        person: []
      },
      rules: {
        line: [{ required: true, message: "请选择呼叫线体", trigger: "blur" }],
        station: [
          { required: true, message: "请选择呼叫工位", trigger: "blur" }
        ],
        reason: [
          { required: true, message: "请选择呼叫原因", trigger: "blur" }
        ],
        person: [
          {
            type: "array",
            required: true,
            message: "请选择呼叫工程师",
            trigger: "blur"
          }
        ]
      },
      centerData: lineData.centerData,
      showTips: 0,
      showTips1: -1,
      tipsLamp: false,
      //线体概览
      lineSummaryData: {
        department: "",
        project: "",
        classdirector: ""
      },
      //判断是成型工站还是非成型工站
      stationType: 0, //0是成型1是ccd收料
      stationName: "", //
      //单元产能
      capacityConfig: {
        ALLNUMBER: 0,
        CAPACITY: 0,
        REALNUMBER: 0,
        INPUT: 0,
        OUTPUT: 0
      },
      // target_tt: 0, //标准节拍
      workStationData: 0, //节拍
      unitAlarmNum: 0, //单元报警次数
      timeRate: 0 //时间稼动率
    };
  },
  computed: {},
  components: {
    BarEchart,
    BarEchartSmallLevel,
    BarEchartLevel,
    BarTargetEchart,
    BarLineEchart,
    LineStackedArea,
    GaugeEchart,
    GanttHighchart,
    GanttEchart,
    WaterDiagramEchart,
    NowTime,
    Screenfull,
    Loginout,
    BorderFrame,
    TopNavigation,
    SeamlessScroll,
    SwiperScroll
  },
  created() {
    if (!getLocalStorage("initLogin")) {
      this.$message({
        showClose: true,
        message: "账号过期，请重登入！",
        type: "error"
      });
      this.$router.push({ path: "login", query: {} });
      return;
    }
    //MES跳转过来判断
    if (this.$route.query.line_code) {
      this.line_code = decodeURI(this.$route.query.line_code);
    }
    if (this.line_code && this.line_code != "undefined") {
      this.split_arr = this.line_code.split("*");
      this.project_code = this.split_arr[0];
    } else {
      this.line_code = "";
    }
    this.sql = "CLASS_CODE=" + "'" + this.project_code + "'";
    if (this.$route.query.line_code) {
      this.pcLine = false;
    }
    // 全局图跳转过来判断
    if (this.$route.query.map_line) {
      if (this.$route.query.map_line == "DOM-01") {
        this.initialIndex = 2;
        this.domLine = true;
      }
      this.map_class = this.$route.query.map_class;
      this.map_project = this.$route.query.map_project;
      this.map_line = this.$route.query.map_line;
      this.sltClass = this.map_class;
      this.sltProject = this.map_project;
      this.line_code = this.map_line;
      this.sltLine = this.map_line;
      this.getClassProject();
    }
    // 客户群跳转过来判断
    if (this.$route.query.classroom_project) {
      this.sltClass = this.$route.query.classroom_class;
      this.classroom_pro = this.$route.query.classroom_project;
      this.getClassProject();
    }
    // 本地缓存跳转过来判断
    // 只有不带筛选条件的时候才启用本地缓存
    if (
      !this.$route.query.line_code &&
      !this.$route.query.map_line &&
      !this.$route.query.classroom_project
    ) {
      if (getLocalStorage("class_code")) {
        this.sltClass = getLocalStorage("class_code");
        this.getClassProject();
      }
      if (getLocalStorage("pro_code")) {
        this.sltProject = getLocalStorage("pro_code");
        this.sql = "CLASS_CODE=" + "'" + this.sltProject + "'";
      }
      if (getLocalStorage("line_code")) {
        this.sltLine = getLocalStorage("line_code");
        this.line_code = this.sltLine;
      }
    }
    this.alarmMateriel();
  },
  mounted() {
    let self = this;
    function fixStyles() {
      // 渲染完毕后，修改菜单的高度占满屏幕高度
      let bodyHeight = document.documentElement.clientHeight; // 去除topbar的高度
      document.querySelector(".visualization").style.height = bodyHeight + "px";
    }
    fixStyles();
    var _scaleBody = true;
    var _innerWidth = _scaleBody ? 1920 : window.innerWidth;
    var _innerHeight = _scaleBody ? 1080 : window.innerHeight;
    // 页面动态缩放适应屏幕尺寸
    window.onresize = function() {
      fixStyles();
      let BodyStyle = document.querySelector(".visualization").style;
      BodyStyle["margin"] = "0px";
      BodyStyle["width"] = _innerWidth + "px";
      BodyStyle["height"] = _innerHeight + "px";
      BodyStyle["transform-origin"] = "left top 0px";
      BodyStyle["transform"] =
        "translateZ(0) scale(" +
        window.innerWidth / _innerWidth +
        "," +
        window.innerHeight / _innerHeight +
        ")";
      BodyStyle["overflow"] = "hidden";
      document.getElementsByTagName("body")[0].style["overflow"] = "hidden";
    };
    window.onresize();
    //获取项目和线体
    this.getObjectLine();
    // 获取客户群
    this.getAllClass();
    //增加客户群跳转过来判断  !this.$route.query.classroom_project
    if (
      this.line_code &&
      this.line_code != "undefined" &&
      !this.$route.query.classroom_project
    ) {
      //第一页轮播
      //获取目标值
      this.getLineconfig();
      //线体概览
      this.getLineInfo();
      //产能达成率-顶部
      this.getCapacityEfficiency();
      //班次良率-顶部
      this.getLineEfficiency();
      //线体-直通率-顶部
      this.getThroughRate();
      //班次-OEE-顶部
      this.getOeeRate();
      //工单完成情况-顶部
      this.getWorkOrder();
      //产能达成
      this.getCapacity();
      //工站节拍平衡图
      this.getWorkStation();
      //当前物料
      this.getMateriel();

      //第二页轮播
      //MTTR
      this.getHeaderMTTR();
      //MTTF
      this.getHeaderMTTF();
      //MTBF
      this.getHeaderMTBF();
      //线体实时运行状态
      this.getRealStatus();
      //报警数量TOP5
      this.getAlarmNUm();
      //CCD不良项占比
      this.getCCD();
      //报警时长TOP5
      this.getAlarmTime();
      //穴位不良监控
      this.getAcupoint();
    }
    // if (this.line_code == "DOM-01") {
    //   //DOM线接口
    //   //获取工站
    //   // this.GetStationByLineSection();
    //   //单元报警
    //   this.GetUnitAlarm();
    //   //时间稼动率
    //   this.GetUnitTimeRate();
    //   //成型投入产出
    //   // this.GetUnitInputOut();
    //   //工站运行状态
    //   this.GetUnitRunStatus();
    // }

    //公告信息
    this.getNotice();
    this.timingRequset();
    this.timingRequset1();
    this.timingRequset2();
    this.timingRequset3();
    this.timingRequset4();
    this.reloadtime = setTimeout(() => {
      window.location.reload();
    }, 1000 * 60 * 60 * 12);
  },
  beforeDestroy() {
    clearInterval(this.timeout);
    clearInterval(this.timeout1);
    clearInterval(this.timeout2);
    clearInterval(this.timeout3);
    clearInterval(this.alarmTimeout);
    clearInterval(this.reloadtime);
    removeLocalStorage("class_code");
    removeLocalStorage("pro_code");
    removeLocalStorage("line_code");
  },
  methods: {
    enterEvt() {
      this.seenNav = true;
    },
    leaveEvt() {
      this.seenNav = false;
    },
    jumpClick(item) {
      this.$router.push({ path: item, query: { time: new Date().getTime() } });
    },
    historygo() {
      window.history.back(); //返回上一页
    },
    kanbanChange(item) {
      if (item.length > 10) {
        window.open(item, "_blank");
      } else {
        this.$router.push({
          path: item,
          query: { time: new Date().getTime() }
        });
      }
    },
    //定时调取
    timingRequset() {
      this.timeout = setInterval(() => {
        if (this.line_code && this.line_code != "undefined") {
          if (this.scrollIndex == 0 || this.scrollIndex == 2) {
            //第一页轮播
            //当前物料
            this.getMateriel();
          } else {
            //第二页轮播
            //线体实时运行状态
            this.getRealStatus();
          }
        }
      }, 3 * 1000);
    },
    //定时调取
    timingRequset1() {
      this.timeout1 = setInterval(() => {
        if (this.line_code && this.line_code != "undefined") {
          if (this.scrollIndex == 0 || this.scrollIndex == 2) {
            //第一页轮播
            //获取目标值-调取完后获取产能和班次平衡图接口
            this.getLineconfig();
            //工单完成情况-顶部
            this.getWorkOrder();
            //CCD不良项占比
            this.getCCD();
          } else {
            //MTTR
            this.getHeaderMTTR();
            //MTTF
            this.getHeaderMTTF();
            //MTBF
            this.getHeaderMTBF();
            //穴位不良监控
            this.getAcupoint();
            //报警数量TOP5
            this.getAlarmNUm();
            //报警时长TOP5
            this.getAlarmTime();
          }
        } else {
          //获取项目和线体
          this.getObjectLine();
        }
      }, 60 * 1000);
    },
    //定时调取-公告展示
    timingRequset2() {
      this.timeout2 = setInterval(() => {
        //公告信息
        this.getNotice();
        if (this.line_code && this.line_code != "undefined") {
          if (this.scrollIndex == 1) {
            //穴位不良监控
            this.getAcupoint();
          }
        }
        // if (this.line_code == "DOM-01") {
        //   //DOM线接口
        //   //获取工站
        //   // this.GetStationByLineSection();
        //   //单元报警
        //   this.GetUnitAlarm();
        //   //时间稼动率
        //   this.GetUnitTimeRate();
        //   //成型投入产出
        //   // this.GetUnitInputOut();
        //   //工站运行状态
        //   this.GetUnitRunStatus();
        // }
      }, 5 * 60 * 1000);
    },
    //定时调取
    timingRequset3() {
      this.timeout3 = setInterval(() => {
        if (this.line_code && this.line_code != "undefined") {
          if (this.scrollIndex == 0 || this.scrollIndex == 2) {
            //第一页轮播
            //产能达成率-顶部
            this.getCapacityEfficiency();
            //班次良率-顶部
            this.getLineEfficiency();
            //线体-直通率-顶部
            this.getThroughRate();
            //班次-OEE-顶部
            this.getOeeRate();
            //产能达成
            this.getCapacity();
            //工站节拍平衡图
            this.getWorkStation();
          }
        }
        // if (this.classHour.getHours() == 7 || this.classHour.getHours() == 19) {
        // }
      }, 30 * 1000);
    },
    //定时调取
    timingRequset4() {
      this.timeout4 = setInterval(() => {
        this.showTips += 1;
        if (this.showTips == 12) {
          this.showTips = 0;
        }
        this.stationName = this.centerData[this.showTips].UNIT;
      }, 5 * 1000);
    },
    //轮播change事件
    scrollChange(evt) {
      this.scrollIndex = evt;
    },
    //获取客户群-项目-关联关系-通过客户群名称获取该客户群下所有的项目
    getClassProject() {
      let params = {
        sqlwhere: "ORG_CODE=" + this.sltClass
      };
      getLineconfig(qs.stringify(params))
        .then(response => {
          let table = loadXML(response).Table;
          if (!table) {
            this.projectOptions = [];
            return;
          }
          this.projectOptions = table;
          // 客户群跳转过来判断
          if (this.$route.query.classroom_project) {
            for (let index = 0; index < table.length; index++) {
              if (
                table[index].CLASS_NAME == this.$route.query.classroom_project
              ) {
                this.sltProject = table[index].CLASS_CODE;
              }
            }
          }
        })
        .catch(() => {});
    },
    //获取客户群
    getAllClass() {
      let params = {};
      getAllClass(qs.stringify(params)).then(response => {
        let table = loadXML(response).Table;
        if (!table) {
          return;
        }
        this.classOptions = table;
      });
    },
    classChange(evt) {
      setLocalStorage("class_code", evt);
      this.sltClass = evt;
      this.getClassProject();
    },
    //获取项目、线体
    getObjectLine() {
      if (this.$route.query.line_code) {
        return;
      }
      getObjectLine()
        .then(response => {
          let table = loadXML(response).Table;
          if (!table) {
            this.allProLinedata = [];
            this.projectOptions = [];
          }
          let data = GroupbyName(table, "CLASS_CODE");
          this.allProLinedata = data;
          if (this.$route.query.map_line || getLocalStorage("pro_code")) {
            //全获取完项目线体后-获取线体数据
            this.proChange(this.sltProject);
          }
          // 客户群跳转过来判断
          if (this.$route.query.classroom_project) {
            this.proChange(this.sltProject);
          }
        })
        .catch(() => {});
    },
    //项目change事件
    proChange(evt) {
      setLocalStorage("pro_code", evt);
      this.sltLine = "";
      this.sql = "CLASS_CODE=" + "'" + evt + "'";
      // 项目下线体数据
      this.lineOptions = [];
      for (let index = 0; index < this.allProLinedata.length; index++) {
        if (this.allProLinedata[index].name == evt) {
          let list = this.allProLinedata[index].data;
          for (let x = 0; x < list.length; x++) {
            this.lineOptions.push({
              value: list[x].LINE_CODE,
              label: list[x].LINE_NAME
            });
          }
        }
      }
      //全景图跳转过来线体判断
      if (this.map_line) {
        this.sltLine = this.map_line;
      }
      // 客户群跳转过来判断
      if (this.$route.query.classroom_project) {
        this.sltLine = this.lineOptions[0].value;
        this.line_code = this.sltLine;
        this.lineChange(this.line_code);
      }
      // 本地缓存跳转过来判断
      if (
        !this.$route.query.line_code &&
        !this.$route.query.map_line &&
        !this.$route.query.classroom_project
      ) {
        this.sltLine = getLocalStorage("line_code");
      }
    },
    lineChange(evt) {
      if (evt.indexOf("DOM") != -1) {
        this.$router.push({ path: "kanban21", query: {} });
      }
      setLocalStorage("line_code", evt);
      this.sltLine = evt;
      this.line_code = evt;
      //第一页轮播
      //线体概览
      this.getLineInfo();
      //产能达成率-顶部
      this.getCapacityEfficiency();
      //工单完成情况-顶部
      this.getWorkOrder();
      //班次良率-顶部
      this.getLineEfficiency();
      //线体-直通率-顶部
      this.getThroughRate();
      //班次-OEE-顶部
      this.getOeeRate();
      //获取目标值
      this.getLineconfig();
      //CCD不良项占比
      this.getCCD();
      //MTTR
      this.getHeaderMTTR();
      //MTTF
      this.getHeaderMTTF();
      //MTBF
      this.getHeaderMTBF();
      //线体实时运行状态
      this.getRealStatus();
      //穴位不良监控
      this.getAcupoint();
      //报警数量TOP5
      this.getAlarmNUm();
      //报警时长TOP5
      this.getAlarmTime();
    },
    //获取目标值
    getLineconfig() {
      let table;
      //目标产能
      let target_capacity = 0;
      //目标良率
      let target_yield = 0;
      //标准节拍
      let target_tt = 0;
      let params = {
        sqlwhere: this.sql
      };
      getLineconfig(qs.stringify(params))
        .then(response => {
          let table = loadXML(response).Table;
          if (!table) {
            // //工站节拍平衡图
            // this.getWorkStation();
            // //产能达成
            // this.getCapacity();
            return;
          }
          target_capacity = Number(table[0].STD_TT);
          target_yield = Number(table[0].STD_YIELD);
          target_tt = Number(table[0].STD_CT);
          this.target_capacity = target_capacity;
          this.target_yield = target_yield;
          this.target_tt = target_tt;
          // //工站节拍平衡图
          // this.getWorkStation();
          // //产能达成
          // this.getCapacity();
        })
        .catch(() => {});
    },
    //线体概览 e e
    getLineInfo() {
      let params = {
        line_code: this.line_code
      };
      getLineInfo(qs.stringify(params))
        .then(response => {
          let table = loadXML(response).Table;
          if (!table) {
            this.kanban1.left.lineSummaryData = {};
            return;
          }
          this.kanban1.left.lineSummaryData = {
            department: table[0].ORG_NAME,
            project: table[0].CLASS_CODE,
            workOrder: table[0].WO_NO,
            classdirector: table[0].OPERATOR,
            technician: table[0].LINE_DIRECTOR,
            PE_PERSON: table[0].PE_PERSON,
            QE_PERSON: table[0].QE_PERSON
          };
        })
        .catch(() => {});
    },
    //当前物料
    getMateriel() {
      let params = {
        lineCode: this.line_code
      };
      getMateriel(qs.stringify(params))
        .then(response => {
          let table = loadXML(response);
          if (!table) {
            this.kanban1.left.materielData.data = [];
            return;
          }

          let alarm_data = [];
          let section_name = [];
          let total_num = [];
          let left_num = [];
          let minArr = [];
          for (let i = 0; i < table.length; i++) {
            if (table[i].SECTION_CODE == "M_GH") {
              table[i].SECTION_CODE = "钢环";
            } else if (table[i].SECTION_CODE == "M_CX") {
              table[i].SECTION_CODE = "料带";
            } else if (table[i].SECTION_CODE == "M_CX1") {
              table[i].SECTION_CODE = "料带1";
            } else if (table[i].SECTION_CODE == "M_CX2") {
              table[i].SECTION_CODE = "料带2";
            } else if (table[i].SECTION_CODE == "M_CX3") {
              table[i].SECTION_CODE = "料带3";
            } else if (table[i].SECTION_CODE == "M_CX4") {
              table[i].SECTION_CODE = "料带4";
            } else if (table[i].SECTION_CODE == "M_CX5") {
              table[i].SECTION_CODE = "料带5";
            } else if (table[i].SECTION_CODE == "M_CX6") {
              table[i].SECTION_CODE = "料带6";
            } else if (table[i].SECTION_CODE == "M_QG") {
              table[i].SECTION_CODE = "前盖";
            } else if (table[i].SECTION_CODE == "M_DM") {
              table[i].SECTION_CODE = "DOME";
            } else if (table[i].SECTION_CODE == "M_DM2") {
              table[i].SECTION_CODE = "DOME2";
            } else {
              table[i].SECTION_CODE = "其他";
            }
            section_name.unshift(table[i].SECTION_CODE);
            if (table[i].SECTION_CODE.indexOf("料带") != -1) {
              total_num.unshift(table[i].LEFT_QTY.toFixed(2));
            } else {
              total_num.unshift(table[i].LEFT_QTY.toFixed(0));
            }
            left_num.unshift(
              ((table[i].LEFT_QTY / table[i].QUANTITY) * 100).toFixed(1)
            );
          }
          this.kanban1.left.materielList = table;
          //判断是否有报警值
          for (let k = 0; k < section_name.length; k++) {
            minArr.push(10);
            if (left_num[k] <= 10) {
              alarm_data.push(1);
            }
          }
          if (alarm_data.length > 0) {
            this.twinkleStatus = true;
          } else {
            this.twinkleStatus = false;
          }
          if (left_num.length > 0) {
            this.kanban1.left.materielData = {
              data: [
                {
                  name: "余量",
                  type: "bar",
                  label: {
                    show: true,
                    color: "#ffffff",
                    fontSize: 16,
                    position: "bottom",
                    // formatter: "{c}"+"%"   "\n" +
                    formatter: function(v) {
                      // let val = v.data;
                      // return val + "%";
                      return total_num[v.dataIndex] + "（" + v.data + "%）";
                    }
                  },
                  barMaxWidth: 25,
                  //配置样式
                  itemStyle: {
                    // 通常情况下：
                    normal: {
                      barBorderWidth: 1,
                      barBorderRadius: 4,
                      //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                      color: params => {
                        let colorList = ["#FF6F90", "#05f8d6"];
                        // return colorList[params.dataIndex];
                        // 判断是控制最小数值颜色变化
                        if (params.value < minArr[params.dataIndex]) {
                          return colorList[0];
                        } else {
                          return colorList[1];
                        }
                      }
                    },
                    //鼠标悬停时：
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)"
                    }
                  },
                  data: left_num,
                  markLine: {
                    //添加警戒线
                    symbol: "none", //去掉警戒线最后面的箭头
                    name: "目标值",
                    silent: false,
                    label: {
                      position: "end", //将警示值放在哪个位置，三个值"start","middle","end"  开始  中点 结束
                      // formatter: "目标值(" + this.target_yield + ")",
                      formatter: 10 + "%",
                      color: "#fff",
                      fontSize: 16
                    },
                    data: [
                      {
                        silent: false, //鼠标悬停事件  true没有，false有
                        lineStyle: {
                          //目标值的样式  ，虚实  颜色
                          type: "solid",
                          color: "#ef4464",
                          width: 2
                        },
                        name: "目标值",
                        xAxis: 10
                      }
                    ]
                  }
                }
              ],
              color: ["#05f8d6"],
              name: section_name,
              legend: ["余量"],
              grid: {
                top: "10%",
                bottom: "12%"
              },
              showMax: 100
              // minNum: minNum,
              // singleColor: ["#FF6F90", "#FFB36F"]
            };
          }
        })
        .catch(() => {});
    },
    //物料报警
    alarmMateriel() {
      this.alarmTimeout = setInterval(() => {
        if (this.twinkleStatus) {
          this.alarmStatus = !this.alarmStatus;
        } else {
          this.alarmStatus = false;
        }
        this.tipsLamp = !this.tipsLamp;
      }, 700);
    },
    //产能达成
    getCapacity() {
      let params = {
        line_code: this.line_code
      };
      getCapacity(qs.stringify(params))
        .then(response => {
          let hours = loadXML(response).hours;
          let capacity = loadXML(response).capacity;
          if (!hours) {
            this.kanban1.center.capacityData.data = [];
            capacity = [];
            return;
          }
          let hours1 = [];
          let minArr = [];
          // capacity.map(Number);
          //最大值
          let maxNum = Math.max(...capacity);
          if (maxNum < this.target_capacity) {
            maxNum = Math.ceil(Number(this.target_capacity));
          } else {
            maxNum = Math.ceil(Number(maxNum));
          }
          this.actual_num = 0;
          //遍历添加目标值
          for (let i = 0; i < capacity.length; i++) {
            minArr.push(this.target_capacity);
            // this.actual_num = this.actual_num + Number(capacity[i]);
          }
          //格式化小时
          for (let j = 0; j < hours.length; j++) {
            hours1[j] = hours[j] + ":00";
          }
          this.kanban1.center.capacityData = {
            data: [
              {
                name: "实际",
                type: "bar",
                label: {
                  show: true,
                  color: "#ffffff",
                  fontSize: 16,
                  position: "top",
                  formatter: "{c}"
                },
                barMaxWidth: 30,
                //配置样式
                itemStyle: {
                  // 通常情况下：
                  normal: {
                    barBorderWidth: 1,
                    barBorderRadius: 4,
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: params => {
                      let colorList = ["#FF6F90", "#76da91"];
                      // return colorList[params.dataIndex];
                      // 判断是控制最小数值颜色变化
                      if (params.value < minArr[params.dataIndex]) {
                        return colorList[0];
                      } else {
                        return colorList[1];
                      }
                    }
                  },
                  //鼠标悬停时：
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                },
                data: capacity,
                markLine: {
                  //添加警戒线
                  symbol: "none", //去掉警戒线最后面的箭头
                  name: "目标值",
                  silent: false,
                  label: {
                    position: "end", //将警示值放在哪个位置，三个值"start","middle","end"  开始  中点 结束
                    // formatter: "目标值(" + this.target_yield + ")",
                    formatter: this.target_capacity,
                    color: "#fff",
                    fontSize: 16
                  },
                  data: [
                    {
                      silent: false, //鼠标悬停事件  true没有，false有
                      lineStyle: {
                        //目标值的样式  ，虚实  颜色
                        type: "solid",
                        color: "#91d024",
                        width: 2
                      },
                      name: "目标值",
                      yAxis: this.target_capacity
                    }
                  ]
                }
              }
            ],
            // lineData: capacity[1],
            name: hours1,
            legend: ["实际"],
            showMax: maxNum,
            singleColor: ["#05f8d6"],
            color: ["#FF6F90"]
          };
        })
        .catch(() => {});
    },
    //工站节拍平衡图
    getWorkStation() {
      let params = {
        line_code: this.line_code
      };
      getWorkStation(qs.stringify(params))
        .then(response => {
          let data = loadXML(response).tt;
          let name = loadXML(response).parameterDesc;
          if (!data || !name) {
            this.kanban1.center.workStationData.data = [];
            this.workStationData = 0;
            return;
          }
          let minArr = [];
          //遍历标准节拍
          for (let i = 0; i < name.length; i++) {
            minArr.push(this.target_tt);
          }
          let count = 0;
          //遍历标准节拍
          for (let i = 0; i < data.length; i++) {
            count += Number(data[i]);
          }
          //最大值
          let maxNum = Math.max(...data);
          if (maxNum < this.target_tt) {
            maxNum = Math.ceil(this.target_tt);
          } else {
            maxNum = Math.ceil(maxNum);
          }
          this.kanban1.center.workStationData = {
            // data: data,
            // lineData: standard_tt,
            data: [
              {
                name: "节拍",
                type: "bar",
                label: {
                  show: true,
                  color: "#ffffff",
                  fontSize: 16,
                  position: "top",
                  formatter: "{c}"
                },
                barMaxWidth: 30,
                //配置样式
                itemStyle: {
                  // 通常情况下：
                  normal: {
                    barBorderWidth: 1,
                    barBorderRadius: 4,
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: params => {
                      let colorList = ["#05f8d6", "#FF6F90"];
                      // return colorList[params.dataIndex];
                      // 判断是控制最小数值颜色变化
                      if (params.value < minArr[params.dataIndex]) {
                        return colorList[0];
                      } else {
                        return colorList[1];
                      }
                    }
                  },
                  //鼠标悬停时：
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                },
                data: data,
                markLine: {
                  //添加警戒线
                  symbol: "none", //去掉警戒线最后面的箭头
                  name: "目标值",
                  silent: false,
                  label: {
                    position: "end", //将警示值放在哪个位置，三个值"start","middle","end"  开始  中点 结束
                    // formatter: "目标值(" + this.target_yield + ")",
                    formatter: this.target_tt,
                    color: "#fff",
                    fontSize: 16
                  },
                  data: [
                    {
                      silent: false, //鼠标悬停事件  true没有，false有
                      lineStyle: {
                        //目标值的样式  ，虚实  颜色
                        type: "solid",
                        color: "#91d024",
                        width: 2
                      },
                      name: "目标值",
                      yAxis: this.target_tt
                    }
                  ]
                }
              }
            ],
            name: name,
            legend: ["节拍", "标准节拍"],
            yMaxNum: maxNum,
            minNum: minArr,
            singleColor: ["#FF6F90"],
            color: ["#05f8d6"]
          };
          this.workStationData = (count / data.length).toFixed(2);
        })
        .catch(() => {});
    },
    //产能达成率
    getCapacityEfficiency() {
      let params = {
        line_code: this.line_code
      };
      getCapacityEfficiency(qs.stringify(params))
        .then(response => {
          let data = loadXML(response).Table;
          if (!data) {
            this.kanban1.right.capacityConfig = {
              ALLNUMBER: 0,
              CAPACITY: 0,
              REALNUMBER: 0
            };
          } else {
            this.kanban1.right.capacityConfig = {
              ALLNUMBER: data[0].ALLNUMBER,
              CAPACITY: Number((data[0].CAPACITY * 100).toFixed(1)),
              REALNUMBER: data[0].REALNUMBER
            };
          }
        })
        .catch(() => {});
    },
    //线体总良率 CCD
    getLineEfficiency() {
      let params = {
        line_code: this.line_code
      };
      getLineEfficiency(qs.stringify(params))
        .then(response => {
          let data = loadXML(response).Table;
          if (!data) {
            this.kanban1.right.lineEfficiencyData = {
              OKNUMBER: 0,
              REALNUMBER: 0,
              YIELD: 0
            };
          } else {
            this.kanban1.right.lineEfficiencyData = {
              OKNUMBER: data[0].OKNUMBER,
              YIELD: Number((Number(data[0].YIELD) * 100).toFixed(1)),
              REALNUMBER: data[0].REALNUMBER
            };
          }
        })
        .catch(() => {});
    },
    //线体-直通率
    getThroughRate() {
      let params = {
        line_code: this.line_code
      };
      getThroughRate(qs.stringify(params))
        .then(response => {
          let data = loadXML(response).Table;
          if (!data) {
            this.kanban1.right.throughConfig = {
              FPY: 0,
              OKNUMBER: 0,
              INPUT: 0
            };
          } else {
            this.kanban1.right.throughConfig = {
              OKNUMBER: Number((Number(data[0].CCDRATE) * 100).toFixed(1)),
              FPY: Number((Number(data[0].YIELD) * 100).toFixed(1)),
              INPUT: Number((Number(data[0].TESTRATE) * 100).toFixed(1))
            };
          }
        })
        .catch(() => {});
    },
    //线体--OEE
    getOeeRate() {
      let params = {
        line_code: this.line_code
      };
      getOeeRate(qs.stringify(params))
        .then(response => {
          let data = loadXML(response);
          if (!data) {
            this.kanban1.right.oEEData = {
              RATE: 0
            };
          } else {
            this.kanban1.right.oEEData = {
              RATE: Number((Number(data) * 100).toFixed(1))
            };
          }
        })
        .catch(() => {});
    },

    //工单完成情况
    getWorkOrder() {
      let params = {
        line_code: this.line_code
      };
      getWorkOrder(qs.stringify(params))
        .then(response => {
          let data = loadXML(response).Table;
          if (!data) {
            this.kanban1.right.workOrderConfig = {
              OUTPUT_QTY: 0,
              QTY: 0,
              data: [0]
            };
          } else {
            let showColor = "";
            if (Number(data[0].RATE) <= 0.85) {
              showColor = "#FF6F90";
            } else if (Number(data[0].RATE) <= 0.95) {
              showColor = "#FFB36F";
            } else if (Number(data[0].RATE) <= 100) {
              showColor = "#27D9C8";
            }
            this.kanban1.right.workOrderConfig = {
              OUTPUT_QTY: data[0].OUTPUT_QTY,
              // data: [Number(data[0].RATE)],
              data: [
                {
                  value: Number(data[0].RATE),
                  itemStyle: {
                    color: showColor
                    // opacity: 0.6
                  },
                  emphasis: {
                    itemStyle: {
                      opacity: 0.9
                    }
                  }
                }
              ],
              QTY: data[0].QTY
            };
          }
        })
        .catch(() => {});
    },
    //第二页轮播
    //头部时间相关-TEEP
    getHeaderTEEP() {
      let params = {
        line_code: this.line_code
      };
      getHeaderTEEP(qs.stringify(params))
        .then(response => {
          let data = Number(loadXML(response));
          if (data) {
            this.kanban2.top.teep = (data * 100).toFixed(2);
          }
        })
        .catch(() => {});
    },
    //头部时间相关-MTTR
    getHeaderMTTR() {
      let params = {
        line_code: this.line_code
      };
      getHeaderMTTR(qs.stringify(params))
        .then(response => {
          let data = Number(loadXML(response));
          if (data) {
            this.kanban2.top.repair = data;
          }
        })
        .catch(() => {});
    },
    //头部时间相关-MTTF
    getHeaderMTTF() {
      let params = {
        line_code: this.line_code
      };
      getHeaderMTTF(qs.stringify(params))
        .then(response => {
          let data = Number(loadXML(response));
          if (data) {
            this.kanban2.top.fault = data;
          }
        })
        .catch(() => {});
    },

    //头部时间相关-MTBF
    getHeaderMTBF() {
      let params = {
        line_code: this.line_code
      };
      getHeaderMTBF(qs.stringify(params))
        .then(response => {
          let data = Number(loadXML(response));
          if (data) {
            this.kanban2.top.invalid = data;
          }
        })
        .catch(() => {});
    },
    //线体实时运行状态
    getRealStatus() {
      let params = {
        line_code: this.line_code
      };
      getRealStatus(qs.stringify(params))
        .then(response => {
          let data = loadXML(response);
          if (!data) {
            this.kanban2.left.ganttData.data = [];
            return;
          }
          // let test = parseInt(5*Math.random())+1
          let showData = [];
          let showName = [];
          // for (let index = 0; index < test; index++) {
          for (let index = 0; index < data.length; index++) {
            showName.push(data[index].stationDesc);
            showData.push({
              name: data[index].stationDesc,
              borderColor: "gray",
              pointWidth: 20,
              dataLabels: {
                enabled: true
              },
              data: []
            });
            for (let x = 0; x < data[index].stage.length; x++) {
              //1运行-绿色 2故障-红色 3待机-黄色 4或0 停机-灰色
              //new Date 与 Date.UTC 相差 2707200000毫秒（一个是北京时间，一个是格林尼治时间）
              if (data[index].stage[x].STATUS == 1) {
                showData[index].data.push({
                  x:
                    new Date(data[index].stage[x].STARTTIME).getTime() +
                    2707200000,
                  x2:
                    new Date(data[index].stage[x].ENDTIME).getTime() +
                    2707200000,
                  y: index,
                  color: "#71c16f"
                });
              } else if (data[index].stage[x].STATUS == 2) {
                showData[index].data.push({
                  x:
                    new Date(data[index].stage[x].STARTTIME).getTime() +
                    2707200000,
                  x2:
                    new Date(data[index].stage[x].ENDTIME).getTime() +
                    2707200000,
                  y: index,
                  color: "#f06464"
                });
              } else if (data[index].stage[x].STATUS == 3) {
                showData[index].data.push({
                  x:
                    new Date(data[index].stage[x].STARTTIME).getTime() +
                    2707200000,
                  x2:
                    new Date(data[index].stage[x].ENDTIME).getTime() +
                    2707200000,
                  y: index,
                  color: "#f0da49"
                });
              } else if (
                data[index].stage[x].STATUS == 0 &&
                data[index].stage[x].STATUS == 4
              ) {
                showData[index].data.push({
                  x:
                    new Date(data[index].stage[x].STARTTIME).getTime() +
                    2707200000,
                  x2:
                    new Date(data[index].stage[x].ENDTIME).getTime() +
                    2707200000,
                  y: index,
                  color: "#898989"
                });
              }
            }
          }
          this.kanban2.left.ganttData = {
            data: showData,
            name: showName,
            legend: ["运行", "报警", "待机", "停机"]
          };
        })
        .catch(() => {});
    },
    //CCD不良项占比
    getCCD() {
      let params = {
        line_code: this.line_code
      };
      getCCD(qs.stringify(params))
        .then(response => {
          let table = loadXML(response);
          if (!table) {
            this.kanban2.right.CCDData.data = [];
            return;
          }
          let errname = [];
          let ngnumber = [];
          let ngnumber1 = [];
          let ngrate = [];
          let ngrate1 = [];
          errname = JSON.parse(this.$x2js.xml2js(response).string.__text)
            .errorDesc;
          ngnumber = JSON.parse(this.$x2js.xml2js(response).string.__text)
            .ngNumber;
          ngrate = JSON.parse(this.$x2js.xml2js(response).string.__text).rate;

          for (let i = 0; i < ngnumber.length; i++) {
            ngnumber1[i] = Number(ngnumber[i]);
          }
          for (let i = 0; i < ngnumber.length; i++) {
            if (i > 0) {
              ngrate1.push(
                (Number(ngrate1[i - 1]) + Number(ngrate[i]) * 100).toFixed(2)
              );
            } else {
              ngrate1.push(Number(ngrate[i] * 100).toFixed(2));
            }
          }
          this.kanban2.right.CCDData = {
            data: [
              {
                name: "次数",
                type: "bar",
                barCategoryGap: "0%",
                barMaxWidth: 30,
                itemStyle: {
                  normal: {
                    color: function(obj) {
                      let colors = [
                        "#f89588",
                        "#f8cb7f",
                        "#09b0d3",
                        "#76da91",
                        "#7cd6cf",
                        "#9192ab",
                        "#7898e1",
                        "#efa666",
                        "#eddd86",
                        "#9987ce",
                        "#63b2ee",
                        "#76da91"
                      ];
                      if (obj.dataIndex >= 0) {
                        return colors[obj.dataIndex];
                      }
                    },
                    // opacity: 0.8,
                    barBorderWidth: 1,
                    barBorderRadius: 4,
                    label: {
                      show: true,
                      fontSize: 16,
                      position: "top",
                      color: "#ffffff"
                    }
                  }
                },
                data: ngnumber1
              },
              {
                name: "占比",
                type: "line",
                // smooth: true,
                // xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                  normal: {
                    // color: ["#fdd845"],
                    label: {
                      show: true,
                      fontSize: 16,
                      position: "top",
                      formatter: "{c}%"
                    }
                  }
                },
                data: ngrate1
              }
            ],
            legend: ["次数", "占比"],
            color: ["#f89588", "#fdd845"],
            name: errname,
            name1: errname,
            labelformate: "%",
            axisLabelformate: "%",
            yShowMax1: "100",
            tooltipFormatter: function(params) {
              //根据条件修改
              let unit = "%";
              let index = params[0].dataIndex;
              var relVal = params[0].name;
              for (var i = 0; i < params.length; i++) {
                if (params[i].seriesName == "数量") {
                  unit = "";
                } else {
                  unit = "%";
                }
                relVal +=
                  '<div class="circle" ><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:' +
                  params[i].color +
                  '"></span> ' +
                  params[i].seriesName +
                  " : " +
                  params[i].value +
                  unit +
                  "</div>";
              }
              return relVal;
            } //格式后面加单位
          };
        })
        .catch(() => {});
    },
    //穴位不良监控
    getAcupoint() {
      let params = {
        line_code: this.line_code
      };
      getAcupoint(qs.stringify(params))
        .then(response => {
          let table = loadXML(response).Table;
          if (!table) {
            this.kanban2.right.acupointData.data = [];
          }
          let name = [];
          let data = [];
          for (let index = 0; index < table.length; index++) {
            name.push(table[index].HOLENUMBER + "穴");
            data.push(table[index].NGNUMBER);
          }
          this.kanban2.right.acupointData = {
            data: [
              {
                // name: name,
                data: data,
                type: "bar",
                barMaxWidth: 30,
                itemStyle: {
                  normal: {
                    color: function(obj) {
                      let colors = [
                        "#7cd6cf",
                        "#76da91",
                        "#09b0d3",
                        "#f8cb7f",
                        "#f89588",
                        "#9192ab",
                        "#7898e1",
                        "#efa666",
                        "#eddd86",
                        "#9987ce",
                        "#63b2ee",
                        "#76da91"
                      ];
                      if (obj.dataIndex >= 0) {
                        return colors[obj.dataIndex];
                      }
                    },
                    barBorderWidth: 1,
                    barBorderRadius: 4,
                    label: {
                      show: true,
                      fontSize: 16,
                      position: "top",
                      color: "#ffffff"
                    }
                  }
                },
                smooth: true
              }
            ],
            name: name
          };
        })
        .catch(() => {});
    },
    //报警数量TOP5
    getAlarmNUm() {
      let params = {
        line_code: this.line_code
      };
      getAlarmNUm(qs.stringify(params))
        .then(response => {
          let table = loadXML(response).Table;
          if (!table) {
            this.kanban2.left.alarmTop.data = [];
            return;
          }
          let name = [];
          let data = [];
          for (let index = 0; index < table.length; index++) {
            name.push(table[index].PARAMETER_DESC);
            data.push(table[index].COU);
          }
          this.kanban2.left.alarmTop = {
            // data: data,
            data: [
              {
                // name: name,
                data: data,
                type: "bar",
                barMaxWidth: 30,
                itemStyle: {
                  normal: {
                    color: function(obj) {
                      // let colors = [
                      //   "#f89588",
                      //   "#f8cb7f",
                      //   "#09b0d3",
                      //   "#76da91",
                      //   "#7cd6cf",
                      //   "#9192ab",
                      //   "#7898e1",
                      //   "#efa666",
                      //   "#eddd86",
                      //   "#9987ce",
                      //   "#63b2ee",
                      //   "#76da91"
                      // ];
                      let colors = [
                        "#7cd6cf",
                        "#76da91",
                        "#09b0d3",
                        "#f8cb7f",
                        "#f89588",

                        "#9192ab",
                        "#7898e1",
                        "#efa666",
                        "#eddd86",
                        "#9987ce",
                        "#63b2ee",
                        "#76da91"
                      ];
                      if (obj.dataIndex >= 0) {
                        return colors[obj.dataIndex];
                      }
                    },
                    barBorderWidth: 1,
                    barBorderRadius: 4,
                    label: {
                      show: true,
                      fontSize: 16,
                      position: "right",
                      color: "#ffffff"
                    }
                  }
                },
                smooth: true
              }
            ],
            name: name
          };
        })
        .catch(() => {});
    },
    //报警时长TOP5
    getAlarmTime() {
      let params = {
        line_code: this.line_code
      };
      getAlarmTime(qs.stringify(params))
        .then(response => {
          let table = loadXML(response).Table;
          if (!table) {
            this.kanban2.left.alarmTimeTop.data = [];
            return;
          }
          let data = [];
          let name = [];
          for (let index = 0; index < table.length; index++) {
            name.push(table[index].PARAMETER_DESC);
            data.push(Number(table[index].TIMELENGTH));
          }
          // let showMax = Math.max(...data);
          this.kanban2.right.alarmTimeTop = {
            data: [
              {
                // name: name,
                data: data,
                type: "bar",
                barMaxWidth: 30,
                label: {
                  show: true,
                  fontSize: 16,
                  position: "right",
                  formatter: "{c}min"
                },
                // 显示数值
                itemStyle: {
                  normal: {
                    color: function(obj) {
                      let colors = [
                        "#7cd6cf",
                        "#76da91",
                        "#09b0d3",
                        "#f8cb7f",
                        "#f89588",

                        "#9192ab",
                        "#7898e1",
                        "#efa666",
                        "#eddd86",
                        "#9987ce",
                        "#63b2ee",
                        "#76da91"
                      ];
                      if (obj.dataIndex >= 0) {
                        return colors[obj.dataIndex];
                      }
                    },
                    barBorderWidth: 1,
                    barBorderRadius: 4,
                    label: {
                      show: true,
                      fontSize: 16,
                      position: "right",
                      formatter: "{c}min",
                      color: "#ffffff"
                    }
                  }
                },
                smooth: true
              }
            ],
            name: name
          };
        })
        .catch(() => {});
    },
    // 公告信息
    getNotice() {
      getNotice()
        .then(response => {
          let table = loadXML(response).Table;
          if (!table) {
            this.tmpTips = [];
            return;
          }
          this.tmpTips = table;
        })
        .catch(() => {});
    },
    //一人多线-获取工位
    getCallLineStation() {
      let params = {
        lineCode: this.line_code
      };
      getCallLineStation(qs.stringify(params))
        .then(response => {
          let table = loadXML(response).Table;
          if (!table) {
            this.stationOption = [];
            return;
          }
          this.stationOption = table;
        })
        .catch(() => {});
    },
    //一人多线-通过线体获取项目
    getCallLineProject() {
      let params = {
        lineid: this.line_code
      };
      getCallLineProject(qs.stringify(params))
        .then(response => {
          let table = this.$x2js.xml2js(response).string.__text;
          if (!table) {
            this.callRuleForm.project = "";
            return;
          }
          this.callRuleForm.project = table;
          this.getAlarmReasonInfo();
        })
        .catch(() => {});
    },
    //呼叫线体change事件
    callChange(evt) {
      // this.callRuleForm.line = evt;
      this.getCallLineStation();
      this.getCallLineProject();
    },
    //呼叫信息详情
    closeClick() {
      this.callStatus = false;
    },
    handleClick(tab, event) {},
    //触发呼叫
    callClick() {
      this.callStatus = true;
      this.getCallLineStation();
      this.getCallLineProject();
      this.getPersonList();
      this.loginGmes();
    },
    submitForm(formName) {
      let loadingInstance = Loading.service();
      this.$refs[formName].validate(valid => {
        if (valid) {
          let person = this.callRuleForm.person.toString();
          let str = {
            Bases: {
              md_event_rule_code: "人工呼叫",
              alarm_content: this.callRuleForm.reason,
              md_line_id: "",
              line_code: this.line_code,
              md_section_id: "",
              section_code: "",
              md_process_id: "",
              proc_code: "",
              md_station_id: "",
              station_code: this.callRuleForm.station, //zhipengtigong
              ip: "",
              mac: "",
              md_device_id: "",
              device_code: "",
              md_fixture_id: "",
              fixture_code: "",
              is_closed: "",
              ParameterContext: "",
              expand: this.callRuleForm.project, //zhipengtigong
              expand1: "SAC_SAC2_M",
              // expand2: this.classId,
              expand2: this.kanban1.left.lineSummaryData.department,
              Useridstr: person
            }
          };
          let params = {
            Menuid: "1165815396629090304",
            ProjectCode: "SAC_SAC",
            Token: this.token,
            TransactionCode: "GMOP.AP.ADN.SAC.EventUser",
            InteractionCode: "65e9bec9-7c7d-4953-84e8-4b3e7f6930c7",
            Menuid: "1165815396629090304",
            UserCode: "333",
            Params: JSON.stringify(str)
          };
          gmesGeneralInterface(params)
            .then(response => {
              let data = response.ResultValue;
              loadingInstance.close();
              if (!data) {
                this.$message({
                  showClose: true,
                  message: "呼叫失败！请检查是否有重复未关闭呼叫",
                  type: "error"
                });
              } else {
                this.callStatus = false;
                this.$message({
                  showClose: true,
                  message: "呼叫成功！",
                  type: "success"
                });
              }
            })
            .catch(() => {
              loadingInstance.close();
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.callStatus = false;
    },
    // 登录Gmes
    loginGmes() {
      let params = {
        ApplicationID: null,
        Bases: null,
        ClientIP: null,
        ClientPort: null,
        CommandAdapterAssemblyType: null,
        EnvironmentParameter: null,
        ExecMode: null,
        ExectueRequestToServerURL: null,
        IsOutputTransactionLog: false,
        Language: null,
        OrgID: null,
        ProjectCode: "SAC_SAC",
        ServiceAssemblyType: null,
        ServiceCode: null,
        Stream: null,
        Tables: null,
        Token: null,
        TransactionCode: "GtkBase.AP.Authorization.Login",
        UserCode: "333",
        UserID: null,
        InteractionCode: null,
        Params: '{"Bases":{"user_code":"333","password":"123qwe!@#"}}'
      };
      gmesGeneralInterface(params)
        .then(response => {
          let data = JSON.parse(response.ResultValue);
          this.token = JSON.parse(data.Bases.Data).Token;
        })
        .catch(() => {});
    },
    // 呼叫原因
    getAlarmReasonInfo() {
      let params = {
        projectCode: this.callRuleForm.project
      };
      getCallProjectReason(qs.stringify(params))
        .then(response => {
          let data = loadXML(response).Table;
          if (!data) {
            this.reasonOptions = [];
            return;
          }
          this.reasonOptions = data;
        })
        .catch(() => {});
    },
    // 呼叫工程师
    getPersonList() {
      let name = this.line_code;
      name = name.replace("*", "");
      let params = {
        line_code: name,
        role_name: ""
      };
      getOldLinePerson(qs.stringify(params))
        .then(response => {
          let data = loadXML(response).Table;
          if (!data) {
            this.personOptions = [];
            return;
          }
          this.personOptions = [];
          let arr = this.arrObjectDelRepeat(data);
          for (let index = 0; index < arr.length; index++) {
            if (
              arr[index].ROLE_NAME.indexOf("工程师") != -1 ||
              arr[index].ROLE_NAME.indexOf("技师") != -1
            ) {
              this.personOptions.push(arr[index]);
            }
          }
        })
        .catch(() => {});
    },
    //数组对象去重-冒泡法
    arrObjectDelRepeat(arr) {
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[i].user_code == arr[j].user_code) {
            arr.splice(j, 1);
            //因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
            j--;
          }
        }
      }
      return arr;
    },
    //dom 线
    entertips(item) {
      this.showTips = item;
      this.stationName = this.centerData[this.showTips].UNIT;
    },
    leavetips() {
      // this.showTips = -1;
    },
    //获取工站
    GetStationByLineSection() {
      let params = {
        lineCode: this.line_code,
        sectionType: ""
      };
      GetStationByLineSection(qs.stringify(params))
        .then(response => {
          let table = loadXML(response).Table;
          if (!table) {
            return;
          }
        })
        .catch(() => {});
    },
    //单元工站运行状态
    GetUnitRunStatus() {
      let params = {
        lineCode: this.line_code
      };
      GetUnitRunStatus(qs.stringify(params))
        .then(response => {
          let table = loadXML(response).Table;
          if (!table) {
            return;
          }
          for (let x = 0; x < this.centerData.length; x++) {
            for (let y = 0; y < table.length; y++) {
              if (
                this.centerData[x].UNIT_NAME == table[y].PARAMETER_DESC &&
                this.centerData[x].UNIT == table[y].SECTION_CODE
              ) {
                this.centerData[x].COLLECT_VALUE = table[y].STATUS;
              }
            }
          }
        })
        .catch(() => {});
    },
    //时间稼动率
    GetUnitTimeRate() {
      let params = {
        line: this.line_code
      };
      GetUnitTimeRate(qs.stringify(params))
        .then(response => {
          let table = loadXML(response).opeRateList;
          if (!table) {
            return;
          }
          for (let x = 0; x < this.centerData.length; x++) {
            for (let y = 0; y < table.length; y++) {
              if (this.centerData[x].UNIT == table[y].Section) {
                this.centerData[x].TIME_RATE = (table[y].opeRate * 100).toFixed(
                  2
                );
              }
            }
          }
        })
        .catch(() => {});
    },
    //单元报警
    GetUnitAlarm() {
      let params = {
        lineCode: this.line_code
      };
      GetUnitAlarm(qs.stringify(params))
        .then(response => {
          let table = loadXML(response).Table;
          if (!table) {
            return;
          }
          for (let x = 0; x < this.centerData.length; x++) {
            for (let y = 0; y < table.length; y++) {
              if (
                // this.centerData[x].LINE_CODE == table[y].LINE_CODE &&
                // this.centerData[x].UNIT_NAME == table[y].PARAMETER_DESC &&
                this.centerData[x].UNIT == table[y].SECTION_CODE
              ) {
                this.centerData[x].ALARM_NUM = table[y].ALARM_COUNT;
              }
            }
          }
        })
        .catch(() => {});
    },
    //单元投入产出
    GetUnitInputOut() {
      GetUnitInputOut()
        .then(response => {
          let table = loadXML(response).Table;
          if (!table) {
            return;
          }
        })
        .catch(() => {});
    }
  }
};
</script>
<style>
/* 全局样式 */
.call-tab .el-tabs__item {
  font-size: 20px !important;
  color: #fff;
}
.call-tab .el-tabs__item.is-active {
  color: #00d3e9;
  font-weight: 700;
}
.call-tab .el-form-item__label {
  color: #fff;
  font-size: 16px;
}
.call-tab .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background-color: #2a376b;
}
.el-tag.el-tag--info {
  color: #00d3e9;
  font-size: 16px;
}
.el-tag.el-tag--info {
  background-color: transparent;
}
.el-select .el-input.is-focus .el-input__inner {
  min-height: 36px !important;
}
.el-input--medium .el-input__inner {
  min-height: 36px !important;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
.visualization {
  box-sizing: border-box;
  // background: url(../../assets/images/bg33.png) 0% 0% / 100% 100% repeat scroll
  //   rgb(0, 0, 0);
  background-color: #000c3b;
  // perspective: 1200px;
  padding: 0 20px;
  /*头部*/
  .caption-title {
    background-image: url("../../assets/images/image (3).png");
    background-size: 100% 100%;
    font-size: 22px;
    font-family: "黑体";
    color: #fff;
    // max-width: 1600px;
    margin: 0 auto;
    margin-top: 10px;
    // margin-bottom: 10px;
    text-align: center;
    height: 80px;
    .f-right {
      display: inline-block;
      width: 260px;
      position: absolute;
      top: 20px;
      right: 80px;
      line-height: 46px;
      z-index: 100;
    }
    .f-left {
      display: inline-block;
      width: 260px;
      position: absolute;
      top: 20px;
      left: -25px;
      z-index: 1000;
      img {
        cursor: pointer;
      }
    }
    .login-out {
      display: inline-block;
      position: absolute;
      top: 20px;
      right: 60px;
      line-height: 46px;
      z-index: 1000;
    }
    .screen-right {
      display: inline-block;
      width: 40px;
      position: absolute;
      top: 31px;
      right: 20px;
      color: #b2e1ea;
      z-index: 1000;
    }
    i {
      img {
        height: 50px;
        width: 400px;
      }
    }
  }
  .fixed-back {
    position: fixed;
    top: 25px;
    right: 1px;
    padding: 1px;
    border: 1px #b2e1ea solid;
    // background-color: #dcdfe6;
    // opacity: 0.8;
    cursor: pointer;
    border-radius: 50%;
    z-index: 1000;
    .goback-icon {
      color: #b2e1ea;
      font-size: 30px;
    }
  }
  .slt-cls {
    padding-top: 24px;
    font-size: 18px;
    color: #fff;
    text-align: left;
  }
  .jumpCls {
    padding-top: 16px;
    text-align: left;
    span {
      cursor: pointer;
      display: inline-block;
      box-sizing: border-box;
      padding: 15px 30px;
      -webkit-box-shadow: #07417a 0 0 10px;
      -moz-box-shadow: #07417a 0 0 10px;
      box-shadow: inset 0 0 30px #07417a;
    }
  }
  .biaoti {
    line-height: 60px;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 500px;
    text-align: center;
    font-size: 40px;
    letter-spacing: 5px;
  }
  .box1-back {
    .wgrytj_bt {
      display: inline-block;
      color: #fff;
      font-size: 20px;
      padding: 0px 20px;
    }
  }
  .box1-back2 {
    .wgrytj_bt {
      display: inline-block;
      color: #fff;
      font-size: 20px;
      padding: 0px 20px;
    }
  }
  .btm-title {
    color: #fff;
    font-size: 18px;
    text-align: center;
    margin-top: -10px;
  }
  .capactitySty {
    min-height: 250px;
  }
  .productSty {
    min-height: 250px;
  }
  .stationSty {
    min-height: 250px;
  }
  .gantt-status {
    color: #fff;
    text-align: center;
    span {
      display: inline-block;
      min-width: 20px;
      height: 10px;
      padding: 0 10px;
    }
    .run {
      background-color: #71c16f;
    }
    .alarm {
      background-color: #f06464;
    }
    .await {
      background-color: #f0da49;
    }
    .stop {
      background-color: #898989;
    }
  }
  .right_tb {
    width: 100%;
  }
  .rate-container {
    height: 270px;
    display: flex;
    flex-direction: row;
    .gauge-w {
      display: inline-block;
      // width: 20%;
      padding: 0 10px;
      height: 300px;
      flex: 1;
      // border: 1px red solid;
    }
  }
  /*线体概览 */
  .xmglan {
    width: 100%;
    height: 300px;
    color: #fff;
    padding: 5px 0px 5px 20px;
  }
  .xmglan1 {
    width: 100%;
    height: 630px;
    color: #fff;
    padding: 5px 30px;
  }
  .xm_cszs {
    font-size: 22px;
    padding: 0px 0px 0 10px;
    color: #fff;
  }
  .xm_cszs li {
    line-height: 34px;
    overflow: hidden;
  }
  .xm_cszs li span {
    // color: #fdd845;
    color: #fff;
    padding: 0 0 0 0;
  }
  .xm_cszs li p {
    float: left;
    width: 33%;
  }
  .xm_cszs li p span {
    color: #00ffff;
    padding: 0;
  }
  .xm_cszs li p cite {
    color: #00ffff;
  }
  .center-line {
    border-top: 1px #032d60 solid;
  }
  //第二页轮播
  .top-container {
    height: 140px;
    margin: 15px 0;
    .top-content {
      color: #fff;
      height: 140px;
      background-color: #011a4c;
    }
    .icon-img {
      padding-top: 30px;
      text-align: right;
    }
    .kb-icon {
      display: inline-block;
      font-size: 80px;
    }
    .kb-icon1 {
      display: inline-block;
      font-size: 74px;
    }
  }
  .gantt-status {
    padding-top: 24px;
  }
  .icon-title {
    height: 66px;
    padding: 20px 20px 0;
    font-size: 20px;
  }
  .icon-content {
    padding-left: 20px;
    font-size: 40px;
    color: #25f3e6;
  }
  // 文案滚动
  .btm-scroll {
    position: absolute;
    top: 60px;
    left: 50%;
    z-index: 10;
    width: 1366px;
    height: 40px;
    border-radius: 5px;
    // border: 1px red solid;
    // background-color: #ff980066;
    // background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: radial-gradient(600px 600px at 680px 0, #954659, #3f3259);
    // margin: 0 auto;
    margin-left: -684px;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 24px;
    color: #05f8d6;
    .scroll-contair {
      width: 100vw;
      overflow: hidden;
      // padding-left: calc(100vw - 100%);
      padding-left: 10;
    }
    ul.item {
      list-style-type: none;
      padding: 0;
      margin: 0 auto;
      overflow: hidden;
      li {
        height: 40px;
        line-height: 40px;
        // display: flex;
        // justify-content: space-between;
        // font-size: 15px;
        // color: #fff;
        float: left;
        margin-right: 10px;
      }
    }
  }
  .call-info {
    position: fixed;
    right: 0px;
    top: 286px;
    z-index: 1000;
    color: #00d3e9;
    font-size: 30px;
    text-align: center;
    display: inline-block;
    display: none;
    padding: 6px;
    border-top: 1px #dcdfe6 solid;
    border-left: 1px #dcdfe6 solid;
    border-bottom: 1px #dcdfe6 solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
    background-color: #0a2364;
    div {
      font-size: 12px;
    }
  }
  .callDetail {
    width: 50%;
    min-height: 50%;
    position: absolute;
    top: 25%;
    left: 25%;
    z-index: 100;
    // background: url(../../assets/image/bk7.png) 0% 0% / 100% 100% repeat scroll;
    background-color: #0c1e5e;
    border-radius: 15px;
    border: 2px solid #06539a;
    -webkit-box-shadow: #06539a 0 0 10px;
    -moz-box-shadow: #06539a 0 0 10px;
    box-shadow: inset 0 0 30px #06539a;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 20px;
    .close-btn {
      display: block;
      color: red;
      font-size: 40px;
      text-align: right;
      padding: 10px;
      i {
        cursor: pointer;
      }
    }
    .call-tab {
      margin: 0 50px;
    }
    .space {
      margin: 10px 0px;
      // border-bottom: 1px solid #ccc;
      .space-contair {
        display: flex;
        flex-wrap: wrap;
      }
      .space-left {
        display: block;
        width: 100px;
        padding-bottom: 3px;
        color: #00ffff;
      }
      .space-right {
        display: block;
        flex: 1;
        padding-right: 10px;
        padding-bottom: 3px;
      }
    }
  }
  .footer-bottom {
    width: 100%;
    position: fixed;
    bottom: 10px;
    left: 0;
  }
  .top-title {
    height: 60px;
    .top-container {
      height: 60px;
      margin: 15px 0;
    }
    .person-sty {
      background-color: #011a4c;
      padding: 5px 0;
      margin-bottom: 10px;
    }
    .top-content {
      color: #fff;
      background-color: #011a4c;
      font-size: 20px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 10px;
      svg {
        margin-top: 6px;
      }
      span {
        color: #fdd845;
      }
    }
  }
  .center-map {
    height: 855px;
    // background: url(../../assets/images/20.png) 0% 0% / 100% 100% repeat scroll
    // rgb(0, 0, 0);
    .top-info {
      height: 100px;
      margin-top: 60px;
      color: #00ffff;
      span {
        display: inline-block;
        width: 160px;
      }
      .num {
        padding: 15px 0 0 5px;
        text-align: left;
        color: #ffeb3b;
        font-size: 26px;
      }
      .tips {
        padding: 5px 0 0 5px;
        color: #fff;
        font-size: 16px;
        text-align: left;
      }
      .img-container {
        position: relative;
        text-align: left;
        .spot {
          width: 80px;
          height: 80px;
        }
        .icon-img {
          position: absolute;
          width: 40px;
          height: 40px;
          top: 20px;
          left: 19px;
        }
        .icon-img1 {
          position: absolute;
          width: 40px;
          height: 40px;
          top: 20px;
          left: 20px;
        }
        .icon-img2 {
          position: absolute;
          width: 40px;
          height: 40px;
          top: 20px;
          left: 22px;
        }
        .icon-img3 {
          position: absolute;
          width: 40px;
          height: 40px;
          top: 20px;
          left: 22px;
        }
        .icon-img4 {
          position: absolute;
          width: 40px;
          height: 40px;
          top: 20px;
          left: 20px;
        }
        .icon-img5 {
          position: absolute;
          width: 40px;
          height: 40px;
          top: 20px;
          left: 22px;
        }
      }
    }
    .bottom-info {
      position: absolute;
      bottom: 35px;
      width: 100%;
      text-align: center;
      padding-top: 10px;
      color: aqua;
      .color-status {
        display: inline-block;
        transform: scale(0.7);
      }
      .color-tips {
        display: inline-block;
        padding-left: 2px;
      }
      .color-empty {
        display: inline-block;
        background-color: gray;
        width: 30px;
        margin-left: 10px;
        height: 20px;
        opacity: 0.8;
      }
    }
  }
  .main-center {
    box-sizing: border-box;
    position: relative;
    height: 820px;
    margin: 0 60px;
    background: url(../../assets/images/working-procedure.png) 0% 0% / 100% 100%
      repeat scroll;
  }
  .pos {
    display: inline-block;
    position: absolute;
    z-index: 10;
  }
  .pos-tips {
    position: absolute;
    display: inline-block;
    text-align: left;
    padding: 15px;
    // color: #fff;
    z-index: 100;
    width: 280px;
    height: 180px;
    // background-color: #112a67;
    // border: 2px solid #0d33e2;
    // -webkit-box-shadow: #0d33e2 0 0 10px;
    // -moz-box-shadow: #0d33e2 0 0 10px;
    // box-shadow: inset 0 0 30px #0d33e2;
    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s,
      top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
    background-color: rgba(50, 50, 50, 0.95);
    // background-color: #9192ab;
    border-width: 0px;
    border-color: rgb(51, 51, 51);
    border-radius: 4px;
    color: rgb(255, 255, 255);
    // border: 1px solid #606266;
    // background-color: #ebeef5;
    border-radius: 10px;
    font-size: 15px;
    p {
      margin: 0;
      font-size: 15px;
      padding: 2px 0;
    }
    .main-view {
      width: 100%;
      // display: flex;
      padding-left: 10px;
    }
    .left-view {
      width: 28px;
      padding: 5px;
      padding-top: 17px;
      margin-right: 8px;
      word-wrap: break-word;
      word-break: normal;
      // border: 1px #606266 solid;
      border: 1px #dcdfe6 solid;
      border-radius: 5px;
      font-weight: bold;
    }
    .right-view {
      flex-grow: 1;
      font-weight: bolder;
    }
    .show-word {
      color: #0fe1e8;
    }
  }
  .lamp-box {
    opacity: 0.8;
  }
  .lamp-box1 {
    opacity: 0.6;
  }
  .outlayer {
    z-index: 10;
  }
  .bottom-tips {
    text-align: center;
    height: 31px;
    color: #fff;
    img {
      display: inline-block;
      vertical-align: middle;
    }
    span {
      display: inline-block;
      line-height: 30px;
    }
  }
}
</style>
